<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的资料</title>
    <link rel="stylesheet" href="../../layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../CSS/media.css">
    <style>
        .title{
            width: 100%;
            height: 50px;
            line-height: 50px;
            font-size: 26px;
            color: #00aeff;
            font-weight: 700;
            border-bottom: 1px solid #101010;
        }
        .avater{
            display: block;
            width:120px;
            height: 120px;
            border-radius:100%
        }
        .change{
            font-size: 16px;
            font-weight: 700;
            cursor: pointer;
        }
        .btn{
            float: right;
            width: 120px;
        }
        .layui-form-radioed>i, .layui-form-radio>i:hover {
            color: #00aeff !important;
        }
    </style>
</head>
<body>
    <div style="width: 100%; box-sizing: border-box; padding: 15px 20px;">
        <div class="title">个人资料</div>
        <form class="layui-form form personalData" action="" lay-filter="personalData">
            <input type="hidden" name="images" class="image">
            <div class="layui-form-item" style="margin-top: 15px;">
                <div class="layui-upload">
                
                    <div class="layui-upload-list">
                        <img class="layui-upload-img avater" src="./../../static/IMG/Personal/photo.png" id="img">
                        <!-- <p id="demoText"></p> -->
                    </div>
                    <label class="layui-form-label change" id="change">修改头像</label>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-block">
                    <input type="text" name="username" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input userCount" disabled>
                </div>
            </div> 
            <div class="layui-form-item">
                <label class="layui-form-label">昵称</label>
                <div class="layui-input-block">
                    <input type="text" name="nickname" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input userName">
                </div>
            </div> 
            <div class="layui-form-item">
                <label class="layui-form-label">性别</label>
                <div class="layui-input-block">
                  <input type="radio" name="sex" value="男" title="男" >
                  <input type="radio" name="sex" value="女" title="女">
                </div>
              </div>
            <div class="layui-form-item">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-block">
                    <input type="password" name="password" placeholder="请输入密码" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">确认密码</label>
                <div class="layui-input-block">
                    <input type="password" name="password1" placeholder="请输入密码" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">手机</label>
                <div class="layui-input-block">
                    <input type="text" name="phone" lay-verify="title" autocomplete="off" placeholder="请输入手机号" class="layui-input userPhone">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">邮箱</label>
                <div class="layui-input-block">
                    <input type="text" name="email" lay-verify="title" autocomplete="off" placeholder="请输入邮箱" class="layui-input userMail">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button type="submit" class="layui-btn layui-btn-normal save" lay-submit="" lay-filter="demo1">保存</button>
                </div>
            </div>
        </form>
    </div>
<script src="./../../JS/jquery-2.0.3.js"></script>
<script src="../../node_modules/iframeResizer.contentWindow.js"></script>
<script src="../../layui/layui.js" charset="utf-8"></script>
<script>
var pObj = parent.parent.getLocalStorage('JSXM');
var imgurl = null;
console.log(pObj)
$(function () {
    // 判断是否自定义了用户头像
    if(pObj.userPhoto !=null){
        $('#img').attr('src',pObj.userPhoto)
    }else{
        $('#img').attr('src','../../static/IMG/Personal/photo.png')
    }
    layui.use(['form','element','upload'], function () {
        var form = layui.form;
        var element = layui.element;
        var $ = layui.jquery;
        var upload = layui.upload;
        form.val('personalData', {
            "username": pObj.userCount
            ,"nickname":pObj.userName
            ,"sex": pObj.userSex
            ,"phone": pObj.userPhone
            ,"email": pObj.userMail
        });
        if(pObj.userPhoto != null){
            imgurl =  pObj.userPhoto
        }else{
            imgurl = '../../static/IMG/Personal/photo.png' 
        }
        //监听提交
        form.on('submit(demo1)', function(data){
            var json={
                "id":pObj.id,
                "userName":data.field.nickname,
                "userCount":data.field.username,
                "userSex":data.field.sex,
                "userPhoto":imgurl,
                "userPhone":data.field.phone,
                "userMail":data.field.email,
            };
            if(data.field.password != ''){
                if(data.field.password != data.field.password1){
                    parent.parent.layer.msg('密码不一致');
                    return false;
                }
                json.userCode= data.field.password;
            }
            $.ajax({
                type: 'POST',
                url: parent.parent.defaultUrl +'/updateUser',
                data: JSON.stringify(json),
                dataType: 'json',
                contentType: 'application/json',
                xhrFields: {
                    withCredentials: true // 这里设置了withCredentials
                },
                success: function (res) {
                    pObj.userCount = res.data.userCount;
                    pObj.userName = res.data.userName;
                    pObj.userSex = res.data.userSex;
                    pObj.userPhoto = res.data.userPhoto;
                    pObj.userPhone =res.data.userPhone;
                    pObj.userMail =res.data.userMail;
                    parent.parent.setLocalStorage('JSXM',pObj)
                    parent.parent.layer.msg('修改成功');
                    window.location.reload();
                    // 刷新父级页面
                    parent.location.reload();
                    // 刷新index页面
                    parent.parent.location.reload();
                    // parent.SwitchPanel(personalData) 
                }
            })
            return false;
        });
    });
    var url;
    if(pObj.userPhoto == null){
        url = '../static/IMG/Personal/photo.png'
    }else{
        url = pObj.userPhoto
    }
    console.log(url)
    // 头像修改
    $('#change').click(function () {
        parent.parent.modifyPicture(url,function (base64,blob) {
            $('#img').attr('src',base64);
            var formData = new FormData();
            formData.append('file', blob);
            parent.parent.ajaxFile(parent.parent.defaultUrl + '/file/imgs', formData, function (res) {
                console.log(res)
                imgurl = res.data;
            })
        });
    })
})

</script>
</body>
</html>